<!--咨询-->
<template>
    <div>
          <mt-header fixed > </mt-header>
       <div class="top_title" style="z-index:99;top:0;">

            <p style="text-align:center;width:100%;height:100%;">
                    <span :class="tabStatus==0?'active tbtn':'tbtn'" @click="shishi">实时资讯</span>
                    <span  :class="tabStatus==1?'active tbtn':'tbtn'" @click="gonggao">平台公告</span>
            </p>
        </div>
        <div class="shidiv" v-if="tabStatus==0">
                    <div style="margin-top: 1rem;width: 100%;
                        background: #000;
                        opacity: .0;"></div>
                    <iframe frameborder="0" width="100%" height="100%" scrolling="yes" security="restricted"  sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" src="https://www.jin10.com/example/jin10.com.html?fontSize=20px&backgroundColor=ffffff&color=000" style="height:900px"></iframe>      
              </div>
        <div class="shidiv" v-if="tabStatus==1">
                     <div style="margin-top: 1rem;width: 100%;
                        background: #000;
                        opacity: .0;"></div>

                    <mt-cell :title="item.title" :label="item.created_at" is-link v-for="(index,item) in noticeList" :key="index" @click.native="detailed(item)"></mt-cell>

                    <mt-popup  v-model="popupVisible3" :value="popupVisible3" position="right"  class="mint-popup-3"  :modal="false">
                        <mt-header fixed >
                                <router-link to="" slot="left">
                                    <mt-button icon="back" @click.native="popupVisible3 = false">资讯</mt-button>
                                </router-link>
                        </mt-header>

                        <h3 class="pop_title">
                            {{popupItem.title}}
                        </h3>
                        <p class="pop_con">
                            {{popupItem.content}}
                        </p>
                    </mt-popup>                 
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      isshishi: true,
      isgonggao: false,
      disshi: true,
      disgong: false,
      tabStatus:0,
      noticeList:[],
      popupVisible3: false,
      popupItem:{}
    };
  },
  methods: {
    shishi() {
      var that = this;
      that.tabStatus = 0; 
    },
    gonggao() {
      var that = this;
      that.tabStatus = 1; 
      this.notices();
    },
    notices(){
            this.$http({
            method: "GET",
            headers: {
                "Content-Type": "application/json; charset=UTF-8"
            },
            url: this.$serverUrl + "notices"
            })
            .then(
            res => {
                this.noticeList = res.data.data;
                // console.log(this.noticeList);
            },
            function(error) {}
            );
    },
    detailed(item){
        this.popupVisible3 = true;
        this.popupItem = item;
         // console.log(item)
    }
  }
};
</script>

<style scoped>
.tbtn{
    line-height: 1rem;
    padding: .4rem;
    margin: 0;
    color: #FFF;
    border: #000;
}
.active{
    background: #FFF;
    color: #000;
}
.topdiv {
  width: 750px;
  height: 80px;
}
.top_title {
  width: 750px;
  height: 80px;
  display: flex;
  justify-content: flex-start;
  position: fixed;
  top: 85;
  left: 0;
}
.top_title_left {
  width: 375px;
  height: 80px;
  /* background-color: aquamarine; */
  display: flex;
  justify-content: center;
}
.left_top1 {
  width: 200px;
  height: 80px;
  background-color: azure;
  display: flex;
  justify-content: center;
  line-height: 80px;
  font-size: 28px;
  color: red;
  /* border-bottom: 5px solid #000; */
}

.left_top2 {
  width: 200px;
  height: 80px;
  background-color: azure;
  display: flex;
  justify-content: center;
  line-height: 80px;
  font-size: 28px;
  color: #333333;
  /* border-bottom: 5px solid #000; */
}
.shidiv {
  margin-top: 80px;
  width: 100;
}
.gongshi {
  margin-top: 80px;
  width: 100;
  height: 300px;
  background-color: red;
}
  .mint-popup-3 {
        width: 100%;
        height: 100%;
        background-color: #fff;
      }
      .pop_title{
          margin-top: 100px;
          margin-left: 30px;
          font-size: 36px
      }
      .pop_con{
          margin-top: 20px;
          margin-left: 30px;
          font-size: 30px;
      }
</style>


